<?php include_once 'header.php'; ?>
  <style type="text/css">
    .prices {
      float: left;
      width: 200px;
    }

    table th, tr, td {
      text-align: center;
    }
  </style>
  <div id="page-wrapper">
    <div class="container-fluid">
    </div>
  </div>
<script>
    var kid = 'k001';
    var name = '客服';
    var host='';
    var avatar = 'http://gzmxkj.com/layui/images/kf.jpg';
    var imgUploadUrl="http://gzmxkj.com/upload"; //图片上传

    layui.use('layim', function(layim) {
        //演示自动回复
        var autoReplay = [
           /* '您好，我现在有事不在，一会再和您联系。',
            '你没发错吧？face[微笑] ',
            '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
            '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
            'face[威武] face[威武] face[威武] face[威武] ',
            '<（@￣︶￣@）>',
            '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
            'face[黑线]  你慢慢说，别急……',
            '(*^__^*) face[嘻嘻] ，是贤心吗？'*/
        ];

        //连接端口
        //var socket = new WebSocket('wss://smfet.com:9501');

        var socket = new WebSocket('ws://gzmxkj.com:9501');

        //连接成功时触发
        socket.onopen = function() {
            //console.log("连接成功")
        };

        //监听收到的消息
        socket.onmessage = function(res) {
            // var obj=eval("("+res.data+")");
            var obj = JSON.parse(res.data);
            if(obj.type == 'init') {
                var params = {"from_id":kid};
                var ajaxUrl = host+'/chat/load';



                $.post(ajaxUrl,params,function (res) {
                    $.each(res.data,function (i,e) {
                        var obj2={
                            avatar:e.from_avatar,
                            content:e.content,
                            username:e.from_name,
                            id:e.from_id, //聊天窗id
                            type: 'friend'
                        }
                        obj2.mine = false;
                        layim.getMessage(obj2);


                    })

                })
                var msg = {
                    from_id: kid,
                    type: 'bind'
                }
                socket.send(JSON.stringify(msg));
            } else if(obj.type == 'say') {
                var obj2 = {
                    content: obj.data,
                    name:obj.from_id,
                    username:obj.username,
                    id: obj.from_id, //聊天窗id
                    type: obj.type,
                    avatar:obj.avatar
                };



                obj2.type = 'friend';
                obj2.mine = false;
                console.log(obj);
                layim.getMessage(obj2);
            }
            else if(obj.type == 'save'){
                //入库
                var params = {
                    "from_id": obj.from_id,
                    "to_id": obj.to_id,
                    "is_read": obj.isRead,
                    "content": obj.data,
                    "from_name": name,
                    "from_avatar": avatar,
                };
                $.ajax({
                    type: "post",
                    dataType: "json",
                    async:false,
                    url: host+'/chat/save',
                    data:params,
                    success: function (res) {

                    },
                });
            }
            else {

            }

            //res为接受到的值，如 {"emit": "messageName", "data": {}}
            //emit即为发出的事件名，用于区分不同的消息
        };

        socket.onerror = function() {
            console.log("onerror")
        };

        socket.onclose = function(res) {
            console.log("onclose")
        };

        //基础配置
        layim.config({
            //或采用以下方式初始化接口
            init: {
                mine: {
                    "username": name //我的昵称
                    ,"id": kid //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "" //我的签名
                    ,"avatar": avatar
                }
                ,friend: []
                ,group: []
            }
            ,isAudio: true //开启聊天工具栏音频
            ,isVideo: true //开启聊天工具栏视频
            ,uploadImage: {
                url: imgUploadUrl //接口地址
                ,type: 'post' //默认post
            }

            //扩展工具栏
            /* ,tool: [{
               alias: 'code'
               ,title: '代码'
               ,icon: '&#xe64e;'
             }]*/
            //,brief: true //是否简约模式（若开启则不显示主面板）

            ,title: 'WebIM' //自定义主面板最小化时的标题
            //,right: '100px' //主面板相对浏览器右侧距离
            //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
            ,
            initSkin: '3.jpg' //1-5 设置初始背景
            //,skin: ['aaa.jpg'] //新增皮肤
            //,isfriend: false //是否开启好友
            //,isgroup: false //是否开启群组
            //,min: true //是否始终最小化主面板，默认false
            ,notice: true //是否开启桌面消息提醒，默认false
            ,voice: false //声音提醒，默认开启，声音文件为：default.mp3
            ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
            , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
        });
        //layim.setChatMin();
        //监听在线状态的切换事件
        layim.on('online', function(data) {
            //console.log(data);
        });

        //监听签名修改
        /*layim.on('sign', function(value){
          //console.log(value);
        });*/

        //监听自定义工具栏点击，以添加代码为例
        /*layim.on('tool(code)', function(insert){
          layer.prompt({
            title: '插入代码'
            ,formType: 2
            ,shade: 0
          }, function(text, index){
            layer.close(index);
            insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
          });
        });*/

        //监听layim建立就绪
        layim.on('ready', function(res) {
            //console.log(res.mine);
            //layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
            //添加好友（如果检测到该socket）
        });

        //监听发送消息
        layim.on('sendMessage', function(data) {
            var To = data.to;
            var mine = data.mine;
            var msg = {
                type: 'say',
                avatar:avatar,
                from_id: kid,
                to_id: To.id,
                username: name,
                name: '一号客服',
                text: mine.content
            };
            console.log(data);
            socket.send(JSON.stringify(msg));

            //  if(To.type === 'friend'){
            //    layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
            //  }

        });

        //监听查看群员
        layim.on('members', function(data) {
            //console.log(data);
        });

        //监听聊天窗口的切换
        layim.on('chatChange', function(res) {
            var type = res.data.type;
            console.log(res.data.id);
            if(type === 'friend') {
                //模拟标注好友状态
                //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
            } else if(type === 'group') {
                //模拟系统消息
                layim.getMessage({
                    system: true,
                    id: res.data.id,
                    type: "group",
                    content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
                });
            }
        });
    });
</script>
<!--<script>
    var kid = 'k001';
    var name = '客服001';
    var avatar =  'http://gzmxkj.com/layui/images/kf.jpg';
    layui.use('layim', function(layim){
        //基础配置
        layim.config({

            //获取主面板列表信息，下文会做进一步介绍
            init: {
                mine: {
                    "username": name //我的昵称
                    ,"id": kid //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "" //我的签名
                    ,"avatar":avatar
                }
                ,friend: []
                ,group: []
            }

            //获取群员接口（返回的数据格式见下文）
            ,members: {
                url: '' //接口地址（返回的数据格式见下文）
                ,type: 'get' //默认get，一般可不填
                ,data: {} //额外参数
            }

            //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
            ,uploadImage: {
                url: '' //接口地址
                ,type: 'post' //默认post
            }

            //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
            ,uploadFile: {
                url: '' //接口地址
                ,type: 'post' //默认post
            }
            //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
            ,tool: [{
                alias: 'code' //工具别名
                ,title: '代码' //工具名称
                ,icon: '&#xe64e;' //工具图标，参考图标文档
            }]

            ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
            ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
            ,brief: false //是否简约模式（如果true则不显示主面板）
            ,initSkin: '4.jpg' //1-5 设置初始背景
            ,notice: true //是否开启桌面消息提醒，默认false
        }).chat({
            name: "用户001"
            ,type: 'friend'
            ,avatar: 'http://gzmxkj.com/layui/images/userface.jpg'
            ,id: -2
        });
        layim.setChatMin(); //收缩聊天面板
    });
</script>-->
<?php include_once 'footer.php'; ?>